Transcript Introduction to Websites and Website Management
Introduction to Websites and Website Management
Objectives
• To define websites • To learn how to develop a simple website • To learn best practices in web management • To manage and customize a webpage
By the end of this module
Participants should be able to:-
• Understand the basic structures of a typical website • Master elementary skills in HTML, CSS and PHP web management programming skills
Introduction
What is a Website: A Web site refers to the location on the Internet of the Web pages and related files which will be displayed using a program called a Web browser
Working with Well-Formed Web Pages
• A
web page
is an "HTML Document". • This is what a very simple HTML document looks like:
•
Key Elements Of An Effective Website Appearance
– A site must be visually appealing, polished and professional. Remember, it's reflecting your company, your products and your services. website may be the first, and only, impression a potential customer receives of your company.
– An attractive site is far more likely to generate a positive impression and keep visitors on your site once they arrive. Ideas like this are what PR professionals pay attention to keep their businesses successful.
Key Elements (cont.)
• •
Content
Along with style, your site must have substance. Remember that your audience is looking for information that will help them make a decision, so it should be informative and relevant. Use this opportunity to increase visitor confidence in your company's knowledge and competence.
Functionality
• Every component of your site should work quickly and correctly. Broken or poorly constructed components will only leave your visitors frustrated and disillusioned with your company. Across the spectrum, everything should work as expected, including hyperlinks, contact forms, site search, event registration, and so on.
Error-free copy
Remember the exposure your website will get. Double-check your facts and figures, as you don't know who may be quoting you tomorrow. Nor do you want to be recognized or remembered for typos, incorrect grammar and punctuation, or misspellings. Spelling mistakes and bad grammar are as unforgivable on a website as they are in other company materials.
Key Elements (cont.)
•
Usability
– A critical, but often overlooked component of a successful website is its degree of usability. Your site must be easy to read, navigate, and understand. Some key usability elements include: – Simplicity – Fast-loading pages – Minimal scroll – Consistent layout: – Prominent, logical navigation – Descriptive link text – Cross-platform/browser compatibility – Screen Resolution
HTML
What is HTML?
It Stands for
Hyper Text Markup Language; which
is a language for describing web pages. – A scripting language which forms a set tags, that describe document content; – HTML documents contain tags and plain text which can also be refereed to as
“Web pages.”
HTML Editors
– HTML Tags are written in text editors which are later saved with the extension .HTML. That means HTML can be edited by using HTML/ Text editors like: • Adobe Dreamweaver / CS • Notepad • WordPad • Kompozer • HTMLkit
HTML Page Structure
Below is a visualization of an HTML page structure: •
This a heading
This is a paragraph.
This is another paragraph.
•
Activity One:
30 minutes
A Practice on HTML
HTML Tags
• Markup tags or HTML tags are keywords surrounded by
angle brackets
like
,
,
that are normally written in pairs
like
and
Example:
Basic Tags
HTML headings headings are defined with the
to tags.
Example
This is a heading
HTML Paragraphs paragraphs are defined with thetag.
Example
This is a paragraph.
HTML Links links are defined with the tag.Example This is a link HTML Images Images are defined with the tag.
Example
Elements
• An HTML element is everything from the start tag to the end tag:
This is my first paragraph.
ElementEmpty HTML Elements
– HTML elements with no content are called empty elements.
Example:
is an empty element without a closing tag (the
tag defines a line break).
Attributes
Attributes provide
additional information
element, they are always specified in
tag.
about an
the start
Attributes come in name/value pairs like:
name="value"
Attribute Example In HTML links are defined with the tag and the link address is specified in the
href attribute
: • Example • This is a link
Headings
• Headings are defined with the
to tags.
defines the most important heading. defines the least important heading.
Example
Example
This is a heading
This is a heading
This is a heading
Comments
Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this: Example •
Paragraphs
Paragraphs are defined with the
tag.
Example
This is a paragraph
This is another paragraph
Line Breaks
We use the
tag to create a line break (a new line) without starting a new paragraph: Example
This is
a para
graph with line breaks
is an empty element. It has no end tag.
Formatting
HTML uses tags like and for formatting output, like
bold
or
italic
text.
These HTML tags are called formatting tags
Tag
– – – – – – – – –
Description
Defines bold text Defines emphasized text Defines a part of text in an alternate voice or mood Defines smaller text Defines important text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text
Links
A hyperlink or links are words, group of words, or image that you can click on to jump to another document.
In HTML the tag defines a hyperlink.
• Link Syntax The HTML code for a link is simple, as follows:
Link text
Example
Link Attributes
• The
target
attribute specifies where to open the linked document.
Example
Visit my page! • The id attribute can be used to create a bookmark inside an HTML document.
Example
An anchor with an id inside an HTML document: Useful Tips Section
Heads
• The
tag is a container for all the head elements. Elements inside can include scripts, instruct the browser where to find style sheets, provide meta information, and more.Elements That Can be added in the Head Section • The